<template>
<div>
    <el-menu :default-active="activeIndex" class="d-flex" mode="horizontal" router="true" type="flex">
        <el-menu-item style="margin-right: 300px">
            <span>
                <img src="https://gitee.com/dominate_the_world/mypics/raw/master/img/20200923200637.png" class="logo">
            </span>
        </el-menu-item>
        <el-menu-item index="/home">主页</el-menu-item>
        <el-menu-item index="/question">发起提问</el-menu-item>
        <el-menu-item index="/myquestion">我的问题</el-menu-item>
        <el-menu-item index="/archive">时间轴</el-menu-item>
        <el-menu-item>
            <el-input type="text" placeholder="特朗普要和中国开战" v-model="keyword"></el-input>
        </el-menu-item>
        <el-button class="ser-button" type="primary" size="mini" @click="handlerSearch">搜索</el-button>
        <el-menu-item index="/register" v-if="uname==null">注册</el-menu-item>
        <el-menu-item index="/login" v-if="uname==null">登录</el-menu-item>
        <el-menu-item index>
            <el-dropdown v-if="uname!=null">
                <span class="el-dropdown-link">
                    <avatar :username="uname" background-color="red"></avatar>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>你好:{{uname}}</el-dropdown-item>
                    <el-dropdown-item>
                        <span @click="handlerlogout">退出登录</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/forkedQuestion">我的关注</router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu-item>
    </el-menu>
</div>
</template>

<script>
import storage from "../model/storage";
import Avatar from "vue-avatar";

export default {
    inject: ["reload"],
    data() {
        return {
            activeIndex: "/home",
            title: "",
            uname: "",
            keyword: ''
        };
    },
    methods: {
        toggleLang(lang) {
            if (lang === "zh") {
                localStorage.setItem("locale", "zh");
                this.$i18n.locale = localStorage.getItem("locale");
                this.$message({
                    message: "切换为中文！",
                    type: "success"
                });
            } else if (lang === "en") {
                localStorage.setItem("locale", "en");
                this.$i18n.locale = localStorage.getItem("locale");
                this.$message({
                    message: "Switch to English!",
                    type: "success"
                });
            }
        },
        handlerSearch() {

            this.$router.push({
                path: "/search",
                query: {
                    keyword: this.keyword
                }
            });
        },

        handlerlogout() {
            console.log("点击了退出登录");
            //前端清空用户信息与token缓存就可以了
            this.$store.commit("del_token");
            this.$store.commit("del_userInfo");
            this.$store.commit("delUserID");
            this.reload();
            this.$router.push("/login");
        }
    },
    components: {
        Avatar
    },

    created() {
        this.uname = storage.get("username");
        let uid = storage.get("uid");
        console.log(this.uname);
        console.log(uid);
    }
};
</script>

<style scoped>
span :hover {
    color: red;
}

.logo {
    height: 50px;
    width: 150px;
    color: #3399ea;
}

.serachInput {
    width: 250px;
    margin-top: 10px;
}

.ser-button {
    width: fit-content;
    height: fit-content;
    margin-top: 16px;
    margin-left: 50px;
}
</style>
